<template>
  <div style="height: 100%;width: 100%">
    <div class="header">
      <img :src="logo" class="logo" />
    </div>
    <div class="login-container" :style="bgImg">
      <div class="login-area">
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
          auto-complete="on"
          label-position="left"
        >
          <div class="title-container">
            <span class="title">SIGN IN</span>
          </div>

          <el-form-item prop="userAccount">
            <span class="svg-container svg-container_login">
              <svg-icon icon-class="user" />
            </span>
            <el-input
              v-model="loginForm.userAccount"
              :placeholder="$t('login.userAccount')"
              name="userAccount"
              type="text"
              auto-complete="on"
            />
          </el-form-item>

          <el-form-item prop="userPassword" style="margin-bottom: 0px">
            <span class="svg-container">
              <svg-icon icon-class="password" />
            </span>
            <el-input
              :type="passwordType"
              v-model="loginForm.userPassword"
              :placeholder="$t('login.userPassword')"
              name="userPassword"
              auto-complete="on"
            />
          </el-form-item>

          <el-popover
            ref="popover1"
            placement="right"
            title="温馨提示"
            width="200"
            trigger="hover"
            content="请联系管理员重置密码"
          >
          </el-popover>
          <div style="text-align: right;margin-bottom: 20px">
            <el-button type="text" style="color: #999999;sty" v-popover:popover1
              >忘记密码?</el-button
            >
          </div>

          <el-button
            :loading="loading"
            type="primary"
            style="width:100%;
              border-radius: 30px;
              color: #FFFFFF;
              background-image: linear-gradient(90deg, #4472E8 3%, #285CE4 88%);
            "
            @click.native.prevent="handleLogin"
            >{{ $t("login.logIn") }}</el-button
          >
          <el-input
            v-show="false"
            v-model="loginForm.verkey"
            name="verkey"
            type="hidden"
          />
        </el-form>
      </div>
    </div>
    <div class="footer">
      <div>
        <span>市场招生</span>|<span>教学教务</span>|<span>家校互联</span>|<span>人资财务</span>|<span>OA办公</span>|<span>数据大屏</span>
      </div>
      <div style="font-size: 12px;
  margin-top: 6px;
  color: #ccc;">
        © 2019 Zhengren . All rights reserved 苏ICP备17021657号 由正人技术提供技术支持</span>
      </div>
    </div>
  </div>
</template>

<script>
import { isvalidUserAccount } from "@/utils/validate";
import LangSelect from "@/components/LangSelect";
import SocialSign from "./socialsignin";
import { queryUserInfo } from "@/api/system/user";
import logo from "@/assets/images/login/logo.png";
import banner from "@/assets/images/login/banner.jpg";



export default {
  name: "Login",
  components: { LangSelect, SocialSign },
  data() {
    const validateUserAccount = (rule, value, callback) => {
      if (!isvalidUserAccount(value)) {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("请输入不小于6位的密码"));
      } else {
        callback();
      }
    };
    const validateVCode = (rule, value, callback) => {
      callback();
      //if (value.length < 5) {
      //callback(new Error('请输入图片验证码'))
      //} else {
      // callback()
      // }
    };
    return {
      logo: logo,
      banner:banner,
      loginForm: {
        userAccount: "",
        userPassword: "",
        vcode: "",
        verkey: ""
      },
      loginRules: {
        userAccount: [
          { required: true, trigger: "blur", validator: validateUserAccount }
        ],
        userPassword: [
          { required: true, trigger: "blur", validator: validatePassword }
        ],
        vcode: [{ required: true, trigger: "blur", validator: validateVCode }]
      },
      vcodeImg: this.imgCode(),
      passwordType: "password",
      loading: false,
      showDialog: false,
      redirect: undefined,
      bgImg: 'background: url(' + banner + ') no-repeat center fixed;'
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    // window.addEventListener('hashchange', this.afterQRScan)
  },
  destroyed() {
    // window.removeEventListener('hashchange', this.afterQRScan)
  },
  methods: {
    gRandom() {
      return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    },
    guid() {
      this.verkey =
        this.gRandom() +
        this.gRandom() +
        "-" +
        this.gRandom() +
        "-" +
        this.gRandom() +
        "-" +
        this.gRandom() +
        "-" +
        this.gRandom() +
        this.gRandom() +
        this.gRandom();
      return this.verkey;
    },
    imgCode() {
      return (
        process.env.BASE_API +
        "/auth/vcode?codeKey=" +
        this.guid() +
        "&n=" +
        Math.random()
      );
    },
    changeImgCode() {
      this.vcodeImg = this.imgCode();
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.loginForm.verkey = this.verkey;
          this.$store
            .dispatch("LoginByUserAccount", this.loginForm)
            .then(() => {
              this.loading = false;

              queryUserInfo().then(res => {

                const userDataResKey = res.data.dataResourceKey;
                const resList = res.data.res;
                if (userDataResKey) {
                  if (userDataResKey === "300") {
                    const permissionRoles = [
                      "business:statistic:performanceRanking"
                    ];
                    const hasPermission = resList.some(role => {
                      return permissionRoles.includes(role);
                    });
                    if (hasPermission) {
                      this.$router.push({
                        path: "/statistic/performanceRank"
                      });
                    } else {
                      this.$router.push({ path: "/" });
                    }
                  } else if (userDataResKey === "200") {
                    const permissionRoles = [
                      "business:statistic:performanceRanking"
                    ];
                    const hasPermission = resList.some(role => {
                      return permissionRoles.includes(role);
                    });

                    if (hasPermission) {
                      this.$router.push({
                        path: "/statistic/performanceRank"
                      });
                    } else {
                      this.$router.push({ path: "/" });
                    }
                  } else if (userDataResKey === "100") {
                    const permissionRoles = ["business:clue:list"];
                    const hasPermission = resList.some(role => {
                      return permissionRoles.includes(role);
                    });

                    if (hasPermission) {
                      this.$router.push({
                        path: "/business/followUpClueTable"
                      });
                    } else {
                      this.$router.push({ path: "/" });
                    }
                  } else {
                    this.$router.push({ path: "/" });
                  }
                } else {
                  this.$router.push({ path: "/" });
                  // this.$message({
                  //   message: "数据权限配置不正确！请联系管理员",
                  //   type: "error"
                  // });
                }
              });
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    afterQRScan() {
      // const hash = window.location.hash.slice(1)
      // const hashObj = getQueryObject(hash)
      // const originUrl = window.location.origin
      // history.replaceState({}, '', originUrl)
      // const codeMap = {
      //   wechat: 'code',
      //   tencent: 'code'
      // }
      // const codeName = hashObj[codeMap[this.auth_type]]
      // if (!codeName) {
      //   alert('第三方登录失败')
      // } else {
      //   this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
      //     this.$router.push({ path: '/' })
      //   })
      // }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
$bg: #ffffff;
$light_gray: #eee;
$cursor:#606266;

/*顶部*/
.header {
  margin: 0 auto;
  width: 1000px;
}
.header {
  height: 96px;
  line-height: 96px;
  position: relative;
}
.header .logo {
  display: inline-block;
  vertical-align: middle;
}


/* reset element-ui css */
.login-container {
  .login-area {
    margin: 0 auto;
    width: 1000px;
    height: 100%;
    .el-input {
      display: inline-block;
      height: 30px;
      width: 85%;
      input {

        background: transparent;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;

        height: 30px;
        caret-color: $cursor;
        &:-webkit-autofill {
          -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }
    .el-form-item {
      border: 1px solid #cccccc;
      border-radius: 30px;
    }
  }
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
$dark_gray: #889aa4;
$light_gray: #eee;
$background: "~@/assets/images/login/banner.jpg";
$logo: "logo.png";

.login-container {
  /*login-containerposition: fixed;*/
  height: calc(100% - 220px);
  line-height: calc(100% - 220px);
  width: 100%;

  .login-form {
    float: right;
    background-color: #ffffff;
    border-radius: 8px;
    width: 320px;
    background-color: #fff;
    border-radius: 6px;
    padding: 25px 20px 35px 20px;
    max-width: 100%;
    margin-top: 100px;
  }
  .tips {
    font-size: 30px;
    color: #4472e8;
    letter-spacing: 0;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
  .svg-container {
    /*padding: 6px 5px 6px 15px;*/
    padding: 0px 4px 0px 14px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }
  .title-container {
    position: relative;
    margin-top: 20px;
    margin-bottom: 40px;
    .title {
      padding-bottom:4px;
      font-size: 20px;
      color: #4472e8;
      letter-spacing: 0;
      border-bottom: 2px solid #285ce4;
    }
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
  .thirdparty-button {
    position: absolute;
    right: 35px;
    bottom: 28px;
  }
}


.footer {
  width: 100%;
  height: 124px;
  padding-top: 52px;
  text-align: center;
  clear: both;
}
.footer div {
  margin-bottom: 0;
  color: #aaa;
}
.footer div span {
  margin: 0 11px;
  color: #aaa;
}

.footer .loginLine {
  color: #488ffa !important;
}
</style>
